<template>

	<div class="piggy-wrapper">
		<div class="piggy-wrap">
			<div class="piggy">
				<div class="nose"></div>
				<div class="mouth"></div>
				<div class="ear"></div>
				<div class="tail">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</div>
				<div class="eye"></div>
				<div class="hole"></div>
			</div>
		</div>
		<div class="coin-wrap">
			<div class="coin">$</div>
		</div>
		<div class="legs"></div>
		<div class="legs back"></div>
	</div>
</template>

<script>
	export default {
		name: "pig",
		data() {
			return {

			}
		}
	}
</script>

<style>
	.piggy-wrapper {
		position: relative;
		width: 350px;
		height: 350px;
		display: block;
		margin: 0 auto;
		margin-top: 0px;
	}

	.piggy-wrap {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		transform-origin: bottom center;
		animation: trembling 5s linear infinite;
	}

	@keyframes trembling {
		0% {
			transform: scale(1);
		}

		19% {
			transform: scale(1);
		}

		21% {
			transform: scale(0.99);
		}

		22% {
			transform: scale(1);
		}

		23% {
			transform: scale(0.99);
		}

		24% {
			transform: scale(1);
		}

		25% {
			transform: scale(0.99);
		}

		26% {
			transform: scale(1);
		}

		25% {
			transform: scale(0.99);
		}

		26% {
			transform: scale(1);
		}

		27% {
			transform: scale(0.99);
		}

		28% {
			transform: scale(1);
		}

		29% {
			transform: scale(0.99);
		}

		30% {
			transform: scale(1);
		}

		60% {
			transform: scale(0.95);
		}

		61% {
			transform: scale(1);
		}

		100% {
			transform: scale(1);
		}
	}

	.piggy {
		position: absolute;
		bottom: 40px;
		left: 50%;
		margin-left: -160px;
		width: 270px;
		height: 200px;
		display: block;
		border-radius: 100px;
		background-color: #d88fa0;
	}

	.nose {
		position: absolute;
		top: 80px;
		left: -25px;
		width: 40px;
		height: 60px;
		display: block;
		background-color: #d88fa0;
		z-index: 1;
		border-radius: 4px;
	}

	.mouth {
		position: absolute;
		top: 95px;
		left: -15px;
		width: 0;
		height: 0;
		z-index: 8;
		display: block;
		border-bottom: 60px solid #d88fa0;
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		border-radius: 4px;
	}

	.ear {
		position: absolute;
		top: -35px;
		left: 70px;
		width: 45px;
		height: 40px;
		display: block;
		border-top-right-radius: 60px;
		background-color: #d88fa0;
		z-index: 1;
	}

	.piggy:before {
		position: absolute;
		content: '';
		top: -25px;
		left: 55px;
		width: 60px;
		height: 60px;
		display: block;
		border-top-right-radius: 60px;
		background-color: #cb6980;
		z-index: -1;
	}

	.tail {
		position: absolute;
		left: 254px;
		top: 125px;
	}

	.tail span {
		position: absolute;
		left: 0;
		top: 0;
		width: 20px;
		height: 5px;
		transform: rotate(30deg);
		background-color: #d88fa0;
	}

	.tail span:nth-child(2) {
		left: 3px;
		top: -38px;
		width: 50px;
		height: 50px;
		transform: rotate(-20deg);
		background-color: transparent;
		border-radius: 50%;
		border-width: 5px;
		border-style: solid;
		border-color: transparent #d88fa0 #d88fa0 transparent;
	}

	.tail span:nth-child(3) {
		left: 22px;
		top: -36px;
		width: 30px;
		height: 30px;
		transform: rotate(-40deg);
		background-color: transparent;
		border-radius: 50%;
		border-width: 5px;
		border-style: solid;
		border-color: #d88fa0 transparent transparent #d88fa0;
	}

	.tail span:nth-child(4) {
		left: 7px;
		top: -66px;
		width: 60px;
		height: 60px;
		transform: rotate(-40deg);
		background-color: transparent;
		border-radius: 50%;
		border-width: 5px;
		border-style: solid;
		border-color: transparent transparent #d88fa0 transparent;
	}

	.eye {
		position: absolute;
		left: 35px;
		top: 75px;
		width: 30px;
		height: 30px;
		transform: rotate(45deg);
		border-radius: 50%;
		border-width: 4px;
		border-style: solid;
		border-color: #555 transparent transparent #555;
		animation: blink 5s linear infinite;
	}

	@keyframes blink {
		0% {
			border-color: #555 transparent transparent #555;
		}

		19% {
			border-color: #555 transparent transparent #555;
		}

		20% {
			border-color: transparent #555 #555 transparent;
		}

		60% {
			border-color: transparent #555 #555 transparent;
		}

		61% {
			border-color: #555 transparent transparent #555;
		}

		100% {
			border-color: #555 transparent transparent #555;
		}
	}

	.hole {
		position: absolute;
		left: 121px;
		top: 0;
		width: 60px;
		height: 5px;
		background-color: #555;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}

	.coin-wrap {
		position: absolute;
		top: 0;
		left: -8px;
		z-index: 9;
		width: 100%;
		height: 100%;
		opacity: 0;
		transform-origin: bottom center;
		animation: trembling 5s linear infinite, moveCoin 5s linear infinite;
	}

	.coin {
		position: absolute;
		top: 110px;
		left: 143px;
		z-index: 9;
		width: 61.5px;
		height: 61.5px;
		border-radius: 50%;
		border: 6px solid #e67e22;
		background-color: #f39c12;
		text-align: center;
		line-height: 68px;
		font-size: 45px;
		font-weight: 500;
		color: rgba(32, 32, 32, 0.5);
		box-shadow: inset 0 0 4px #777;
	}

	@keyframes moveCoin {
		0% {
			opacity: 0;
			top: 0;
		}

		19% {
			opacity: 1;
			top: 0;
		}

		21% {
			top: -7px;
		}

		22% {
			top: -7px;
		}

		23% {
			top: -14px;
		}

		24% {
			top: -14px;
		}

		25% {
			top: -21px;
		}

		26% {
			top: -21px;
		}

		27% {
			top: -28px;
		}

		28% {
			top: -28px;
		}

		29% {
			top: -35px;
		}

		30% {
			top: -35px;
		}

		60% {
			top: -35px;
		}

		66% {
			top: -220px;
			opacity: 1;
		}

		67% {
			top: -220px;
			opacity: 0;
		}

		99% {
			top: 0;
			opacity: 0;
		}

		100% {
			opacity: 0;
			top: 0;
		}
	}

	.legs {
		position: absolute;
		bottom: 14px;
		left: 96px;
		width: 40px;
		height: 60px;
		display: block;
		background-color: #cb6980;
		border-radius: 3px;
		z-index: 1;
	}

	.legs:after {
		position: absolute;
		content: '';
		bottom: 0;
		left: 0;
		width: 30px;
		height: 12px;
		display: block;
		background-color: #d88fa0;
		border-bottom-left-radius: 3px;
		border-top-right-radius: 3px;
		z-index: 1;
	}

	.legs.back {
		left: 206px;
	}
</style>